<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { uploadImageApi } from '@/apis/consult'
  import type { ConsultInfo, UploadData } from '@/types/consult'
  import { useConsultStore } from '@/stores/consult'
  import { onShow } from '@dcloudio/uni-app'

  // 接收入参
  const props = defineProps<{ type: string; illnessType: string; depId: string }>()

  const store = useConsultStore()

  onShow(() => {
    {
      // 提示用户是否恢复之前填写的病情数据
      if (store.consultInfo.illnessDesc) {
        uni.showModal({
          title: '温馨提示',
          content: '是否恢复之前填写的病情信息？',
          confirmText: '确认',
          confirmColor: '#16C2A3',
          cancelColor: '#848484',
          success({ confirm }) {
            if (confirm) illnessInfo.value = store.consultInfo
          },
        })
      }
    }
  })
  const illnessInfo = ref<ConsultInfo>({
    illnessDesc: '',
    illnessTime: 1,
    consultFlag: 1,
    // 接收上传到云空间的图片
    pictures: [] as UploadData[],
  })

  const imageList = computed(() =>
    illnessInfo.value.pictures.map((v) => {
      return {
        url: v.url,
        id: v.id,
      }
    })
  )
  // 患病时长
  const illnessTimes = [
    { value: 1, text: '一周内' },
    { value: 2, text: '一月内' },
    { value: 3, text: '半年内' },
    { value: 4, text: '半年以上' },
  ]
  // 是否就诊过
  const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]
  function onFlagTagClick(index: number) {
    // 记录用户选择的数据
    illnessInfo.value.consultFlag = consultFlags[index].value
  }

  // 选择患病时长
  function onTimeTagClick(index: number) {
    // 记录用户选择的数据
    illnessInfo.value.illnessTime = illnessTimes[index].value
  }

  // 选择图片
  const onSelect = async (files: any) => {
    console.log(files)
    // 上传图片
    const filePath = files.tempFilePaths[0]
    console.log(filePath)
    uni.showLoading({ title: '上传中' })
    // 调用上传接口
    const res = await uploadImageApi(filePath)
    illnessInfo.value.pictures.push(res)
    uni.hideLoading()
  }
  // 删除图片
  const onDelete = async (e: any) => {
    console.log('删除图片', e)
    illnessInfo.value.pictures.splice(e.index, 1)
  }

  // 是否允许下一步操作
  const nextStepEnable = computed(() => {
    // 验证必要数据是否填写（接口中只要求病情描述必填）
    return illnessInfo.value.illnessDesc !== ''
  })

  const onNext = () => {
    // 缓存地址参数
    store.type = props.type
    store.illnessType = props.illnessType
    store.depId = props.depId
    // 缓存病情描述数据
    // 解构
    store.consultInfo = { ...illnessInfo.value }

    // 跳转到下一页
    uni.navigateTo({ url: '/subpkg_archive/list/list?type=consult' })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="(item, index) in illnessTimes"
            :key="item.value"
            @click="onTimeTagClick(index)"
            :class="{ active: illnessInfo.illnessTime === item.value }"
            >{{ item.text }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            class="tag"
            v-for="(item, index) in consultFlags"
            :key="item.value"
            @click="onFlagTagClick(index)"
            :class="{ active: illnessInfo.consultFlag === item.value }"
            >{{ item.text }}</text
          >
        </view>
      </view>
      <!-- 上传图片 auto-upload:自定义上传-->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          v-model="imageList"
          @select="onSelect"
          :auto-upload="false"
          @delete="onDelete"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextStepEnable" @click="onNext">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
